<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>
                    <h2>职位信息管理</h2>
                </span>
            </div>
            <div class="box">
                <el-button type="warning" :icon="Refresh" @click="showPositions">刷新</el-button>
                <el-button type="primary" :icon="Upload" @click="dialogVisibleAdd = true">新增职位</el-button>
                <el-button type="success" :icon="Search" @click="dialogVisibleSelect = true">查询职位</el-button>
            </div>
        </template>

        <!-- 用户列表 -->
        <el-table :data="positions" style="width: 100%; border: 1px solid #dcdcdc;">
            <el-table-column label="编号" prop="no" width="150px"></el-table-column>
            <el-table-column label="职位名称" prop="name"></el-table-column>
            <el-table-column label="职位等级" prop="rank"> </el-table-column>
            <el-table-column label="状态" prop="status"></el-table-column>

            <el-table-column label="操作" width="100">
                <template #default="{ row }">

                    <el-button :icon="Edit" circle plain type="primary"
                        @click="dialogVisibleUpdate = true; modifyNo = row.no"></el-button>
                    <el-button :icon="Delete" circle plain type="danger" @click="handleDelete(row.no)"></el-button>

                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有数据" />
            </template>
        </el-table>

        <!-- 条件查询弹框 -->
        <el-dialog v-model="dialogVisibleSelect" title="条件查询" width="500" class="custom-dialog">
            <el-form label-width="100px" style="padding-right: 10px">
                <el-form-item label="职位姓名">
                    <el-input v-model="name1" minlength="1" maxlength="10"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-input v-model="status1" minlength="1" maxlength="15"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" style="position: absolute; bottom: 5px; width: 100%; text-align: center;">
                <el-button @click="dialogVisibleSelect = false">取消</el-button>
                <el-button type="primary" @click="getUserByCondition">确认</el-button>
            </div>


        </el-dialog>

        <!-- 新增用户抽屉 -->
        <el-drawer v-model="dialogVisibleAdd" title="新增职位" direction="rtl" size="35%">
            <!-- 添加用户表单 -->
            <el-form :model="PositionInfo" label-width="100px">
                <el-form-item label="名称">
                    <el-input v-model="PositionInfo.name" placeholder="请输入名称"></el-input>
                </el-form-item>

                <el-form-item label="等级">
                    <el-input v-model="PositionInfo.rank" placeholder="请输入等级"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="addUser(); clearuserModel()">新增</el-button>
                    <el-button type="info" @click="dialogVisibleAdd = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>

        <!-- 修改用户抽屉 -->
        <el-drawer v-model="dialogVisibleUpdate" title="修改职位" direction="rtl" size="35%">

            <el-form :model="PositionInfo" label-width="100px">

                <el-form-item label="名称">
                    <el-input v-model="PositionInfo.name" placeholder="请输入名称"></el-input>
                </el-form-item>

                <el-form-item label="等级">
                    <el-input v-model="PositionInfo.rank" placeholder="请输入等级"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="updatePosition(); clearuserModel()">修改</el-button>
                    <el-button type="info" @click="dialogVisibleAdd = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>

        <!-- 分页条 -->
        <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
            layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
            @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />


    </el-card>

</template>
<script setup lang="ts">
import { ref } from 'vue'
import { type addPositionInfo, type Position, type selectPositions } from '../model';
import { getPositions, addPosition, modifyPosition, deletePosition } from '../api'
import { Delete, Edit, Refresh, Search, Upload } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus';


const name1 = ref('')
const offset = ref(0)
const limit = ref(0)
const status1 = ref('')

let param = ref<selectPositions>({
    offset: offset.value ? offset.value : 0,
    limit: limit.value ? limit.value : 10,
    name: name1.value ? name1.value : '',
    status: status1.value ? status1.value : ''
})

let positions = ref<Position[]>([])
let total = ref(0)

// 新增抽屉
const dialogVisibleAdd = ref(false)
// 修改抽屉
const dialogVisibleUpdate = ref(false)
// 查询弹窗
const dialogVisibleSelect = ref(false)

let pageSize = ref(0);
let pageNum = ref(0);
let PositionInfo = ref<addPositionInfo>({
    name: '',
    rank: '',
})

const showPositions = async () => {
    getPositions(param.value).then(res => {
        console.log(res)
        positions.value = res.t.positions
        total.value = res.t.total
    })
}
const clearPositionInfo = () => {
    PositionInfo.value.name = ''
    PositionInfo.value.rank = ''
}

const clearParam = () => {
    param.value.name = ''
    param.value.status = ''
}
showPositions();
// 条件分页查询用户
const getUserByCondition = async () => {
    param.value.name = name1.value
    param.value.status = status1.value
    showPositions();
    clearParam();
    // 隐藏对话框
    dialogVisibleSelect.value = false
}
getUserByCondition()

//当每页条数发生了变化，调用此函数
const onSizeChange = (size: number) => {
    pageSize.value = size
    param.value.limit = size
    showPositions();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num: number) => {
    pageNum.value = num
    param.value.offset = (num - 1) * param.value.limit,
        showPositions();
}

const addUser = async () => {
    let result = await addPosition(PositionInfo.value);
    ElMessage.success(result.message)
    // 隐藏对话框
    dialogVisibleAdd.value = false;
    clearPositionInfo();

}

const clearuserModel = () => {
    PositionInfo.value.name = '';
    PositionInfo.value.rank = '';
}
let modifyNo = ref(0)

const updatePosition = async () => {
    let result = await modifyPosition(PositionInfo.value, modifyNo.value);
    ElMessage.success(result.message)
    showPositions();
    clearPositionInfo();
    dialogVisibleUpdate.value = false
}

const doDeletePosition = async (no: number) => {
    let result = await deletePosition(no);
    ElMessage.success(result.message)
    showPositions();
}

const handleDelete = async (no: number) => {
    try {
        await ElMessageBox.confirm('此操作将永久删除该职位, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        });

        // 用户确认后执行删除操作
        doDeletePosition(no);
    } catch (error) {
        // 用户取消删除操作
        ElMessage({
            type: 'info',
            message: '已取消删除',
        });
    }
};



</script>

<style scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;
    align-items: center;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.box {
    transform: translateX(100%);
    /**右移元素**/
    -ms-transform: translateX(75%);
    -webkit-transform: translateX(75%);
}

h2 {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
</style>
